<template>
    <div class="tooltip">
        <span style="margin-right: 4px">{{ props.title }}</span>
        <el-popover placement="right" :popper-style="popverStyle" trigger="click">
            <el-scrollbar>
                <div class="table_header_popover_box">
                    <el-descriptions
                        class="popver_desc"
                        direction="vertical"
                        title="客易达电商订单状态与其它平台订单状态的对应关系如下："
                        :column="orderStates.length"
                        border>
                        <el-descriptions-item v-for="(item, index) in orderStates" :key="index" :label="item.shop">
                            <div v-for="(jtem, index) in item.state_list" :key="index" style="line-height: 30px">
                                {{ jtem.name }}
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-scrollbar>
            <template #reference>
                <el-image src="/static/question.png" style="width: 16px; height: 16px"></el-image>
            </template>
        </el-popover>
    </div>
</template>
<script setup lang="tsx">
import { reactive, ref, watch, computed, onBeforeMount, onMounted } from 'vue';
import { getOrderState } from '@/api/ecommerce/tradingManage';
let orderStates = reactive<any>([]);
interface Props {
    title: string;
}
const props = withDefaults(defineProps<Props>(), {
    title: ''
});
onBeforeMount(() => {
    getOrderState().then((res: any) => {
        orderStates = res;
    });
});

const popverStyle = reactive({
    maxWidth: '1200px',
    width: '930px',
    padding: 0
});
const emit = defineEmits(['update:modelValue']);
onMounted(() => {
    const width = document.documentElement.clientWidth;
    if (!width) return;
    const width2 = `${930 - (1685 - width)}px`;
    popverStyle.width = width > 1685 ? '930px' : width2;
});
</script>
<style scoped lang="scss">
.tooltip {
    display: flex;
    align-items: center;
}

.table_header_popover_box {
    min-width: 904px;
    padding: 12px;
}
</style>
